import React, {useState} from "react";

import {Button, ImagePicker, InputItem, List, NavBar, TextareaItem, Toast} from "antd-mobile";
import {createForm} from 'rc-form';
import {useHistory, useParams} from "react-router-dom";

import VerifyTagsInput from "../../component/verifyTagsInput";
import CopyFooter from "../../component/copyFooter";
import {createBox} from "../../requests";
import {getFormValidatorErrText} from '../../utils';


const CreateBox = createForm()(function (props) {
    let rParams = useParams();
    let rHistory = useHistory();

    let {form} = props;
    let {getFieldProps, validateFields} = form;

    let [files, setFiles] = useState([]);
    let [disable, setDisable] = useState(false);

    return (
        <div>
            <NavBar mode="dark">创建盒子</NavBar>

            <List>
                <InputItem {...getFieldProps("name", {rules: [{required: true}]})}
                           type={"text"} clear={true} placeholder={"请输入盒子名称"}>盒子名称</InputItem>
                <List.Item>
                    盒子关键字<VerifyTagsInput {...getFieldProps("keywords")}/>
                </List.Item>
                <TextareaItem {...getFieldProps("desc")}
                              title={"盒子描述"} placeholder={"请输入物品描述"} count={200} rows={5} clear={true}/>
                <List.Item multipleLine={true}>
                    盒子图片
                    <List.Item.Brief>选择一张图片</List.Item.Brief>
                    <ImagePicker className={"object-picker"} selectable={files.length < 1} length={2}
                                 files={files}
                                 onChange={(files, type, index) => {
                                     setFiles(files);
                                 }}/>
                </List.Item>
                <List.Item>
                    <Button disabled={disable} loading={disable} type={"primary"} onClick={() => {
                        validateFields(function (error, value) {
                            if (error) {
                                Toast.fail(getFormValidatorErrText(error));
                                return;
                            }

                            if (files.length < 1) {
                                Toast.fail("请给盒子选择一张图片");
                                return;
                            }

                            setDisable(true);
                            value["keywords"] = value["keywords"] ? value["keywords"].join(",") : "";

                            createBox({...rParams, ...value, image: files[0].file}).then(function () {
                                rHistory.replace("/box/" + rParams.id);
                            }).catch(err => {
                                Toast.fail("非法ID无法创建盒子");
                                rHistory.replace("/");
                            });
                        });
                    }}>添加</Button>
                </List.Item>
                <List.Item>
                    <div style={{height: 50}}/>
                </List.Item>
            </List>

            <CopyFooter/>
        </div>
    );
})

export default CreateBox;